<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>授权页面</title>
    <style>
        body {
            background-color: aliceblue;
        }

        .container {
            max-width: 600px;
            margin: 0 auto;
            padding: 20px;
        }

        .text-center {
            text-align: center;
        }

        .text-primary {
            color: #007bff;
        }

        .font-weight-bold {
            font-weight: bold;
        }

        .pb-3 {
            padding-bottom: 15px;
        }

        .form-group {
            margin-bottom: 15px;
        }

        .form-check-input {
            margin-right: 5px;
        }

        .btn-primary {
            background-color: #007bff;
            color: #fff;
            border: none;
            padding: 10px 20px;
            border-radius: 5px;
            cursor: pointer;
        }

        .btn-link {
            color: #007bff;
            border: none;
            background-color: transparent;
            padding: 0;
            cursor: pointer;
        }

        .pt-4 {
            padding-top: 20px;
        }

        small {
            font-size: 80%;
        }
    </style>
    <script>
        function cancelConsent() {
            document.consent_form.reset();
            document.consent_form.submit();
        }
    </script>
</head>
<body>
<div class="container">
    <div class="py-5">
        <h1 class="text-center text-primary">应用权限</h1>
    </div>
    <div class="row">
        <div class="col text-center">
            <p>
                <span>该应用 {{ .client_name}} </span>
                需要访问您的账号名
                <span class="font-weight-bold">{{ .user_name}}</span>
            </p>
        </div>
    </div>
    <div class="row pb-3">
        <div class="col text-center"><p>以下权限是由上述应用程序请求的<br/>是否同意访问</p></div>
    </div>
    <div class="row">
        <div class="col text-center">
            <form name="consent_form" method="post" action="/oauth2/authorize">
                <input type="hidden" name="client_id" value="{{.client_id}}">
                <input type="hidden" name="state" value="{{ .state}}">

                {{range $i,$v := .scope}}
                    <div class="form-group form-check py-1">
                        <label for="{{$v.Id}}"></label><input class="form-check-input"
                                                              type="checkbox"
                                                              name="scope"
                                                              value="{{$v.Tag}}"
                                                              id="{{$v.Id}}"/>
                        {{$v.Name}}
                    </div>
                {{ end }}

                <div class="form-group pt-3">
                    <button class="btn btn-primary btn-lg" type="submit" id="submit-consent">
                        提交同意
                    </button>
                </div>
                <div class="form-group">
                    <button class="btn btn-link regular" type="button" id="cancel-consent" onclick="cancelConsent();">
                        关闭
                    </button>
                </div>
            </form>
        </div>
    </div>
    <div class="row pt-4">
        <div class="col text-center">
            <p>
                <small>
                    提供访问需要您的同意。
                    <br/>如果您不批准，请单击"取消"，在这种情况下，应用程序将不会共享任何信息。
                </small>
            </p>
        </div>
    </div>
</div>
</body>
</html>